<!-- 提料订单 -->
<template>
	<view class="carryOlder">
		<view class="headerBox"></view>
		<view class="nav_bar" :class="{'nav_bar_bg':isSticky}" :style="{paddingTop:statusBar+'px',height:customBar+'px'}">
			<view class="left" @click="$util.backPage(1)">
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="navTiele">申请提料</view>
		</view>
		
		<view class="tab_box flex_se">
			<view class="tab_item" :class="tagIndex==index?`active active${index}`:''"
				v-for="(item,index) in tagList" :key="index" @click="tagIndex=index">
				{{item}}
			</view>
		</view>
		
		<view class="topBox">
			<view class="weightTxt count">提料克重（g）</view>
			<view class="weightBox flex_sb border_bm">
				<input type="number" v-model="weightNum" class="weightInput" placeholder="请输入提料克重" placeholder-class="plTxt" />
				<text @tap="weightNum = goldInfo.gold_stock">全部</text>
			</view>
			<view class="weightTxt">当前可提料：{{goldInfo.gold_stock}}g</view>
		</view>
		
		<view class="typeBox">
			<view class="title">{{tagIndex == 0 ? '收货地址' : '取货地址'}}</view>
			<view class="delivery">
				<view class='positionBox flex_c'>
					<text class='iconfont icon-dingwei4'></text>
				</view>
				<!-- system_store -->
				<template v-if="tagIndex == 0">
					<view class="userFb" :class="{'addressTxtAc':addressName == ''}" @click="onAddress()">
						{{real_name }} {{ real_phone}}
						<text class="addressTxt line1">{{addressName || '请选择地址'}}</text>
					</view>
					<view class='iconfont icon-xiangyou' @click="onAddress()"></view>					
				</template>
				<template v-else>
					<view class="userFb" @click="onAddress('store')">
						{{system_store.name }} {{ system_store.phone}}
						<text class="addressTxt line1">{{system_store.address}}{{system_store.detailed_address}}</text>
					</view>
					<view class="fixRight" @click="onAddress('store')">距您{{system_store.range}}km</view>
				</template>
			</view>
		</view>
			
		<view class="typeBox">
			<view class="title">订单信息</view>
			<view class="infoItem">
				<view class="name">订单类型</view>
				<view class="num">提料</view>
			</view>
			<view class="infoItem" v-if="tagIndex == 0">
				<view class="name">快递费</view>
				<view class="num">{{freightInfo.express_fee}}</view>
			</view>
			<view class="infoItem">
				<view class="name">订单号</view>
				<view class="num">{{freightInfo.order_sn}}</view>
			</view>
		</view>
		
		<view class="floorBox">
			<view class="btnBox" @tap="saveBtn">
				<!-- ￥{{ price_count }} -->
				{{ weightNum ? `${weightNum}g` : '' }}
				<view class="btn">确认提料</view>
			</view>
		</view>
		
	<addressWindow ref="addressWindow" @changeTextareaStatus="changeTextareaStatus" :news='news' :address='address'
		:pagesUrl="pagesUrl" @OnChangeAddress="OnChangeAddress" @changeClose="changeClose"
		@onHaveAddressList="onHaveAddressList" ></addressWindow>

	</view>
</template>

<script>
	import {storeListApi} from '@/api/store.js';
	import {getAddressList} from '@/api/user.js';
	import {getFreight,getMytock,stockExtract} from '@/api/new_store.js';
	import {homepage_gold} from '@/api/new_api.js';
	import addressWindow from '@/components/addressWindow';
	export default {
		components:{addressWindow},
		data() {
			return {
				customBar: this.customBar,
				statusBar: this.statusBar,
				isSticky: false, // 控制模块是否吸顶
				tagList: ['快递', '自提'],
				tagIndex: 0,
				weightNum:'',
				
				
				coupon: {
					coupon: false,
					list: [],
					statusTile: this.$t(`立即使用`)
				}, //优惠券组件
				news: 0,
				address: {
					address: false
				}, //地址组件
				pagesUrl: "",
				pinkId:'',
				addressId:'',
				textareaStatus:false,
				couponTitle:'',
				couponId:'',
				haveAddressList:false,
				addressName:'' ,// 地址
				real_phone:'',
				real_name:'',
				
				freightInfo:{},
				goldInfo:{},
				addressObj:{},
				system_store:{},
				goldPrice: 0
			}
		},
		onPageScroll(e) {
			// 判断滚动距离是否超过状态栏高度
			this.isSticky = e.scrollTop > this.customBar ? true : false
		},
		onShow() {
			this.getMytockFc()
			this.getFreightFc()
			this.getList()
			this.homepage_goldHandle()
		},
		onHide() {
			this.clearTimer()
		},
		onUnload() {
			this.clearTimer()
		},
		computed: {
			price_count() {
				if(!this.weightNum) return '0.00'
				return (Number(this.goldPrice) * Number(this.weightNum)).toFixed(2)
			}
		},
		
		methods: {
			clearTimer() {
				if (this._timer) {
					clearInterval(this._timer)
					this._timer = null;
				}
			},
			homepage_goldHandle() {
				const uid = uni.getStorageSync('UID')||0
				this._timer = setInterval(() => {
					homepage_gold({uid:uid}).then((res) => {
						this.goldPrice = res.data.find(item=> item.metal_type_name_cn == '黄金').bidprice
					})
				}, 1000)
			},
			saveBtn() {
				let that = this
				if(this.weightNum <= 0) {
					that.$util.Tips({
						title: that.$t(`请输入克重`)
					});
					return
				}
				let obj = {
					type: this.tagIndex + 1,
					order_sn: this.freightInfo.order_sn,
					real_name: this.real_name,
					phone: this.real_phone,
					province: "",
					city: "",
					district: "",
					detail: this.addressName,
					weight: this.weightNum
				}
				if(this.tagIndex == 0) {
					obj.detail = this.addressName
					obj.province = this.addressObj.province
					obj.city = this.addressObj.city
					obj.district = this.addressObj.district
					if(!that.addressName) return that.$util.Tips({title: that.$t('请选择地址')});
				}else {
					obj.province = this.system_store.address
					obj.city = ''
					obj.district = ''
					obj.detail = this.system_store.detailed_address
				}
				stockExtract(obj).then(res => {
					if(res.status != 200) return 
					that.$util.JumpPath('/pages/new_gold/goldWarehouse/carryOlderList')
				})
			},
			getMytockFc() {
				getMytock().then(res => {
					if(res.status != 200) return
					this.goldInfo = res.data
				})
			},
			// 获取快递费和订单号
			getFreightFc() {
				getFreight().then(res => {
					this.freightInfo = res.data
				})
			},
			/**
			 * 获取门店列表数据
			 */
			getList: function() {
				let longitude = uni.getStorageSync("user_longitude") || ''; //经度
				let latitude = uni.getStorageSync("user_latitude") || ''; //纬度
				if(longitude && latitude) {
					let data = {
						latitude: latitude, //纬度
						longitude: longitude, //经度
						page: 1,
						limit: 10
					}
					storeListApi(data).then(res => {
						let list = res.data || [];
						this.$set(this, 'system_store', list[0]);
					})
					return
				}
				
				uni.getLocation({
					type: 'wgs84',
					success:(res)=> {
						try {
							const { latitude, longitude } = res
							let data = {
								latitude: latitude, //纬度
								longitude: longitude, //经度
								page: 1,
								limit: 10
							}
							storeListApi(data).then(res => {
								let list = res.data || [];
								this.$set(this, 'system_store', list[0]);
							})
							uni.setStorageSync('user_latitude', latitude);
							uni.setStorageSync('user_longitude', longitude);
						} catch {}
					}
				});
				
			},
			// 地址
			onAddress: function(v) {
				let that = this;
				this._address_type = v
				this.$refs.addressWindow.getAddressList(v);
				that.textareaStatus = false;
				that.address.address = true;
				this.pagesUrl = '/pages/users/user_address_list/index?news=' + this.news +
					'&pinkId=' +
					this.pinkId +
					'&couponId=' +
					this.couponId;
			},
			ChangCouponsClone: function() {
				this.$set(this.coupon, 'coupon', false);
			},
			/**
			 * 处理点击优惠券后的事件
			 * 
			 */
			ChangCoupons: function(e) {
				// this.usableCoupon = e
				// this.coupon.coupon = false
				let index = e,
					list = this.coupon.list,
					couponTitle = this.$t(`请选择`),
					couponId = 0;
				for (let i = 0, len = list.length; i < len; i++) {
					if (i != index) {
						list[i].use_title = '';
						list[i].is_use = 0;
					}
				}
				if (list[index].is_use) {
					//不使用优惠券
					list[index].use_title = '';
					list[index].is_use = 0;
				} else {
					//使用优惠券
					list[index].use_title = this.$t(`不使用`);
					list[index].is_use = 1;
					couponTitle = list[index].coupon_title;
					couponId = list[index].id;
				}
				this.couponTitle = couponTitle;
				this.couponId = couponId;
				this.$set(this.coupon, 'coupon', false);
				this.$set(this.coupon, 'list', list);
				this.computedPrice();
			},
			addressChange() {
				this.$refs.addressWindow.getAddressList();
			},
			changeTextareaStatus: function() {
				for (let i = 0, len = this.coupon.list.length; i < len; i++) {
					this.coupon.list[i].use_title = '';
					this.coupon.list[i].is_use = 0;
				}
				this.textareaStatus = true;
				this.status = 0;
				this.$set(this.coupon, 'list', this.coupon.list);
			},
			/**
			 * 选择地址后改变事件
			 * @param object e
			 */
			OnChangeAddress: function(e) {
				this.textareaStatus = true;
				this.address.address = false;
				this.addressObj = uni.getStorageSync('addressObj')
				// 门店自提
				if(this._address_type == 'store') {
					this.system_store.name = this.addressObj.name
					this.system_store.phone = this.addressObj.phone
					this.system_store.address = this.addressObj.address
					this.system_store.detailed_address = this.addressObj.detailed_address
					return
				}
				// 快递
				this.addressId = e;
				this.real_name = this.addressObj.real_name
				this.real_phone = this.addressObj.phone
				this.addressName = uni.getStorageSync('addressName')
				
			},
			
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.address, 'address', false);
			},
			onHaveAddressList() {
				this.haveAddressList = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.carryOlder {
		position: relative;
		width: 100%;
		height: 100vh;
		background: rgba(244, 238, 232, 1);
		padding-bottom: 140rpx;
		overflow: hidden;
	}

	.headerBox {
		z-index: 99;
		width: 750rpx;
		height: 479rpx;
		background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
	}

	.nav_bar {
		z-index: 999;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		padding: 0 36rpx;
		box-sizing: border-box;
		.left{
			text{
				color: black;
				font-size: 32rpx;
				transform: rotate(180deg);
				display: block;
			}
		}
	
		.navTiele {
			width: 100%;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 80rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}
		.navTiele::after {
			content: ' ';
			width: 1px;
			height: 1px;
		}
	
	}
	.nav_bar_bg {
		background: #fff;
	}
	

	.tab_box {
		width: 700rpx;
		height: 87rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		background: #F7F0E8;
		color: #78532A;
		font-size: 30rpx;
		margin: -270rpx auto 0;
	
		.tab_item.active {
			height: 110rpx;
			line-height: 110rpx;
			color: rgba(64, 63, 63, 1);
			background: #fff;
			font-weight: bold;
			margin-top: -24rpx;

			&::after {
				position: absolute;
				content: "";
				width: 60rpx;
				height: 60rpx;
				right: -60rpx;
				bottom: 0;

			}

			&::before {
				position: absolute;
				content: "";
				width: 60rpx;
				height: 60rpx;
				bottom: 0;
				left: -60rpx;
			}
		}

		.active0 {
			border-radius: 24rpx 24rpx 0 0;

			&::after {
				background: radial-gradient(circle at 60rpx 0, transparent 60rpx, #fff 60rpx);
			}
		}

		.active1 {
			border-radius: 24rpx 24rpx 0 0;

			&::before {
				background: radial-gradient(circle at 0 0, transparent 60rpx, #fff 60rpx);
			}
		}

		.tab_item {
			position: relative;
			width:50%;
			text-align: center;
			line-height: 87rpx;
		}
	}

	.topBox {
		width: 700rpx;
		height: 279rpx;
		border-radius: 0rpx 0rpx 18rpx 18rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		padding: 0 40rpx;
		overflow: hidden;
		
		.weightTxt {
			font-size: 28rpx;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(61, 61, 61, 1);
			text-align: left;
			margin: 38rpx 0 18rpx;
			&.count {
				font-size: 32rpx;
				font-weight: 550;
				
			}
		}
		.weightBox {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(61, 61, 61, 1);
			padding-bottom: 30rpx;
			margin-top: 12rpx;
		}
		.weightInput {
			font-size: 40rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(212, 48, 48, 1);
			text-align: left;
		}
		::v-deep.plTxt {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(61, 61, 61, .3);
		}
	}
	
	.typeBox {
		position: relative;
		width: 700rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		padding: 26rpx 24rpx 26rpx 24rpx;
		margin: 24rpx auto 0;
		overflow: hidden;
	
		.title {
			position: relative;
			width: 100%;
			height: 80rpx;
			font-size: 32rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 60rpx;
			color: rgba(64, 63, 63, 1);
			text-align: left;
			vertical-align: top;
			padding-left: 10rpx;
			border-bottom: 2rpx solid rgba(246, 246, 246, 1);
	
		}
	
		.title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 16rpx;
			width: 4rpx;
			height: 29rpx;
			background: rgba(242, 208, 150, 1);
	
		}
	
		.infoItem {
			display: flex;
			width: 100%;
			margin-top: 20rpx;
	
			.name {
				flex-shrink: 0;
				width: 140rpx;
				font-size: 28rpx;
				font-weight: 550;
				letter-spacing: 0rpx;
				color: rgba(61, 61, 61, 1);
				text-align: left;
				vertical-align: top;
				margin-right: 36rpx;
			}
	
			.num {
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(82, 79, 79, 1);
				text-align: left;
				vertical-align: top;
			}
	
			.imgList {
				width: 123rpx;
				height: 123rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 10rpx;
			}
		}
		.delivery {
			position: relative;
			display: flex;
			// justify-content: space-between;
			height: 120rpx;
			padding-top: 24rpx;
		}
		.fixRight {
			position: absolute;
			right: 0;
			top: 24rpx;
			font-size: 27rpx;
			font-weight: 400;
			color: rgba(212, 48, 48, 1);
			text-align: right;
		}
			
		.userFb {
			width: 520rpx;
			font-size: 30rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(64, 63, 63, 1);
			text-align: left;
			margin: 0 14rpx;
		}
		.addressTxt {
			display: inline-block;
			width: 500rpx;
			font-size: 27rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 39.1rpx;
			color: rgba(64, 63, 63, 1);
			margin-top: 16rpx;
		}
		.addressTxtAc {
			text-align: right;
			padding-right: 100rpx;
			margin-bottom: 40rpx;
			.addressTxt {
				margin-top: 0;
			}
		}
		.positionBox {
			width: 57rpx;
			height: 57rpx;
			font-size: 36rpx;
			font-weight: 550;
			border-radius: 50%;
			background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
			text {
				font-size: 38rpx;
				font-weight: 550;
			}
		}
	
	}
	
	.floorBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		padding: 38rpx 28rpx 80rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1rpx solid rgba(237, 237, 237, 1);
		.btnBox {
			position: relative;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			font-weight: 700;
			line-height: 100rpx;
			padding-left: 24rpx;
			color: rgba(46, 46, 46, 1);
			border-radius: 20rpx 50rpx 50rpx 20rpx;
			background: rgba(248, 248, 250, 1);
			.btn {
				position: absolute;
				top: 0;
				right: 0;
				width: 202rpx;
				height: 100rpx;
				
				font-size: 28rpx;
				font-weight: 700;
				line-height: 100rpx;
				color: rgba(64, 63, 63, 1);
				text-align: center;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				background: linear-gradient(134.64deg, rgba(226, 192, 148, 1) 0%, rgba(247, 234, 198, 1) 100%);

			}
		}
	}
	
	.border_bm {
		border-bottom: 2rpx solid #F8F8FA;
	}
</style>